<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="icon" href="img/favicon.ico">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/vendor.min.css">
    <link rel="stylesheet" href="css/plugins.min.css">
    <link rel="stylesheet" href="css/style.min.css">
    <style>
        html{
            height: 100%;
            overflow-y: hidden;
        }
        body{
            height: 100%;
            overflow-y: auto;
        }
        #urlsj{
            /*background-color: #9a9a9a;*/
            background-color: #4395FF;
            color: white;
            padding: 10px 15px;
            border-radius: 10px;
            cursor: pointer;
            width: 200px;
            text-align: center;
        }
        .title{
            margin-bottom: 20px;
        }
        .tupian{
            margin: 10px 10px 0 10px;
        }
        .url{
            width: 230px;
            height: 230px;
        }
    </style>
</head>
<body>

<div class="container" style="margin-top: 20px;">
    <h2 class="title">招贤纳士</h2>
    <div>
        <p>欲了解更多信息，请致电：<span id="phonesj"></span></p>
        <p>邮件（Email）：<span id="emailsj"></span></p>
        <p>简历登记表下载：<div id="urlsj">下载简历登记表</div></p>
    </div>
    <div style="margin: 50px 0;">
        <div style="font-size: 20px;font-weight: 600;margin-bottom: 20px;">招聘信息：</div>
        <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;" id="zpInfo">
<!--            <div class="tupian"><img class="url" src="img/no.jpg"></div>-->
<!--            <div class="tupian"><img class="url" src="img/no.jpg"></div>-->
<!--            <div class="tupian"><img class="url" src="img/no.jpg"></div>-->
<!--            <div class="tupian"><img class="url" src="img/no.jpg"></div>-->
<!--            <div class="tupian"><img class="url" src="img/no.jpg"></div>-->
        </div>
        <div style="display: none;" id="zwsj">
            暂无招聘需求
        </div>
    </div>
</div>

<script src="js/vendor.min.js"></script>
<script src="js/plugins.min.js"></script>
<script src="js/main.min.js"></script>
<script src="layui/layui.js"></script>
<script src="js/token.js"></script>
<script src="js/config.js"></script>
<script src="js/jquery.i18n.min.js"></script>
<script src="js/multi_lang_config.js"></script>
<script>

    var layer = layui.layer;
    var form = layui.form;

    $(function (){
        search();
    })
    function search() {
        $.ajax({
            url: HOST+"webapi/aboutUs/getRecruitment",
            type: "GET",
            success: function (res) {
                $('#phonesj').html(res.data.phone);
                $('#emailsj').html(res.data.email);
                // $('#urlsj').html(res.data.url);
            }
        })

        $.ajax({
            url: HOST+"webapi/recruitmentUrl/getAllRecruitmentUrl",
            type: "GET",
            success: function (res) {
                if (res.code == 200){
                    if (res.data.length == 0){
                        $("#zwsj").show();
                    }else{
                        $("#zwsj").hide();
                        $("#zpInfo").html("");
                        var s = "";
                        for (let i = 0; i < res.data.length; i++) {
                            s = s + "<div class=\"tupian\"><img class=\"url\" src=\""+res.data[i].url+"\" onclick=\"previewImgs(this)\"></div>";
                        }
                        $("#zpInfo").html(s);
                    }
                }
            }
        })
    }

    $("#urlsj").click(function () {
        let url = HOST+"webapi/aboutUs/RecruitmentDownload";
        window.open(url);
    })

</script>
<script>
    function previewImgs(obj) {
        var img = new Image();
        img.src = obj.src;
        //var height = img.height + 50; // 原图片大小
        //var width = img.width; //原图片大小
        var imgHtml = "<img src='" + obj.src + "' width='800px' height='500px'/>";
        //弹出层
        layer.open({
            type: 1,
            shade: 0.8,
            offset: 'auto',
            area: [800 + 'px', 550 + 'px'],// area: [width + 'px',height+'px'],  //原图显示
            // area: ['47.2%','64.3%'],
            // area: ['95%','95%'],
            shadeClose: true,
            scrollbar: false,
            title: "图片预览", //不显示标题
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function () {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
            }
        });
    }
</script>
</body>
</html>